<template>
     <div class="mask">
    <div class="box">
      <div class="top">
        <p>|</p>
        <span> 通行记录 </span>
      </div>
      <div class="table">
        <el-table :data="tableData" border style="width: 100%" height="300">
          <el-table-column prop="id" label="序号" width="180" />
          <el-table-column prop="img" label="抓拍照片" width="180">
            <template #default="scoped">
              <img class="img" :src="scoped.row.img" alt="" />
            </template>
          </el-table-column>
          <el-table-column prop="Traffic" label="通行设备" />
          <el-table-column prop="region" label="通行区域" width="180" />
          <el-table-column prop="time" label="通行时间" width="180" />
        </el-table>
      </div>
      <el-divider />
      <el-button type="info" @click="obtns">关闭</el-button>
    </div>
    </div>
 
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import service from "../../../utils/service";
// 声明事件
const emit = defineEmits<{
  (e: "hidden"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const obtns = () => {
  // 触发隐藏事件
  emit("hidden");
};

interface Iplist {
  id: string;
  img: string;
  Traffic: string;
  region: string;
  time: string;
}
const tableData = reactive<Iplist[]>([]);
const obtnchang = () => {
  service({
    url: "/Passthrough",
  }).then((res) => {
    tableData.push(...res.data);
  });
};
obtnchang();
</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.box {
  width: 939px;
  height: 600px;
  background-color: rgb(235, 238, 238);
  position: fixed;
  top: 1px;
  left: 300px;
  z-index: 100;
  overflow: auto;
  
}
.img {
  width: 100px;
}
.top{
  display: flex;
}
.top p{
  color: #3bb19c;
}
.top span{
  font-weight: 700;
}
.el-button{
    float: right;
}
.table{
    margin: 0 20px;
}

</style>